import { memo } from "react"
import styled from "@emotion/styled"

const DataCountStyled = styled.div`
    font-family: Gilroy;
    color: #69728c;
    padding: 12rem 0;
    font-weight: 500;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0%;
    text-align: center;
    margin-top: 24rem;
    margin-bottom: 50rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rem;

    &::before,
    &::after {
        content: "";
        height: 1rem;
        width: 132rem;
        flex: 1;
    }
    &::before {
        background: linear-gradient(
            to right,
            rgba(105, 114, 140, 0.1) 0%,
            rgba(105, 114, 140, 0.5) 100%
        );
    }
    &::after {
        background: linear-gradient(
            to left,
            rgba(105, 114, 140, 0.1) 0%,
            rgba(105, 114, 140, 0.5) 100%
        );
    }
`

// Define the type for the props
interface ComponentProps {
    count: number
    myRef?: React.Ref<HTMLDivElement | null>
    hasMore?: boolean
    loading?: boolean
}

const Component: React.FC<React.PropsWithChildren<ComponentProps>> = (props: ComponentProps) => {
    const { count, myRef, hasMore, loading } = props
    return (
        <div ref={myRef}>
            <DataCountStyled>
                {loading ? <>loading...</> : hasMore ? "load more" : `All ${count} data`}
            </DataCountStyled>
        </div>
    )
}

export default memo(Component)
